<!-- 歌单页面 -->
<template>
  <div>
    <div v-if="!reList.length" class="loading">
      <van-loading color="#1989fa" size="50px" />
    </div>
    <div class="m-vplaylist u-paddlr u-paddbm" v-else>
      <div class="header">
        <van-icon name="arrow-left" size="20" @click="$router.back()" />
      </div>
      <section v-if="!playlist.updateFrequency" class="u-plhead pylst_header">
        <div class="plhead_bg" :style="`background-image: url(${playlist.coverImgUrl})`"></div>
        <div class="plhead_wrap">
          <div class="plhead_fl lsthd_fl">
            <img class="u-img" :src="playlist.coverImgUrl" alt="" />
            <span class="lsthd_icon">{{ playlist.highQuality ? '精品' : '' }}歌单</span>
            <i class="u-earp lsthd_num" style="font-style: normal">{{ num(playlist.playCount) }}</i>
          </div>
          <div class="plhead_fr">
            <h2>{{ playlist.name }}</h2>
            <div class="lsthd_auth f-thide">
              <router-link class="lsthd_link" :to="`/userinfo?id=${creator.userId}`">
                <div class="u-avatar lsthd_ava">
                  <img class="u-img" :src="creator.avatarUrl" alt="" />
                  <img class="ava-icon" v-if="creator.avatarDetail" :src="creator.avatarDetail.identityIconUrl" />
                </div>
                {{ wordLimit(creator.nickname) }}
              </router-link>
            </div>
          </div>
        </div>
      </section>
      <section v-else class="official_pylst_header">
        <div class="ofplheader_bg" :style="`background-image:url(${playlist.backgroundCoverUrl})`"></div>
        <div class="ofplheader_mask"></div>
        <div class="ofplheader_wrap">
          <div>{{ playlist.name }}</div>
          <div class="ofplheader_tag">{{ playlist.updateFrequency }}</div>
          <div class="ofplheader_content f-brk f-thide2">
            <span v-html="playlist.description"></span>
          </div>
          <div class="overflow"></div>
        </div>
      </section>
      <div class="pylst_list">
        <h3 class="u-smtitle">歌曲列表</h3>
        <div class="m-sglst">
          <HitSongList :songlist="reList" :type="false"></HitSongList>
        </div>
        <div class="m_newcomm">
          <h4 v-if="hotComments.length">精彩评论</h4>
          <CommentView :comment="hotComments"></CommentView>
          <template v-if="hotComments.length < 15">
            <h4 v-if="total">最新评论({{ total }})</h4>
            <CommentView :comment="comments"></CommentView>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { numberFormat } from '@/utils/common'
import HitSongList from '@/components/HitSongList.vue'
import CommentView from '@/components/CommentView.vue'
import { commentsAPI, hitSongAPI } from '@/api'
export default {
  components: { HitSongList, CommentView },
  data() {
    return {
      id: this.$route.query.id,
      reList: [], // 热门歌曲
      playlist: {}, // 歌单信息
      hotComments: [], // 精彩评论
      comments: [], // 最新评论
      total: 0,
      creator: {},
    }
  },
  computed: {
    //数字格式化
    num() {
      return (val) => {
        return numberFormat(val)
      }
    },
    //字符串格式化
    wordLimit() {
      return (val) => {
        if (val.length <= 7) {
          return val
        } else {
          return val.slice(0, 7) + '...'
        }
      }
    },
  },
  created() {
    //获取热门歌曲列表
    hitSongAPI({ id: this.id }).then((res) => {
      this.reList = res.data.playlist.tracks.slice(0, 10)
      this.playlist = res.data.playlist
      this.creator = res.data.playlist.creator
    })
    //获取评论
    commentsAPI({ id: this.id }).then((res) => {
      this.hotComments = res.data.hotComments
      if (this.hotComments.length < 15) {
        this.comments = res.data.comments.slice(0, 15 - this.hotComments.length)
        this.total = res.data.total
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
.m-vplaylist {
  background-color: #fff;
  min-height: 100%;
}
.header {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  color: #fff;
}
.u-plhead {
  position: relative;
  padding: 50px 10px 30px 15px;
  overflow: hidden;
  .plhead_bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(20px);
    transform: scale(1.5);
  }
  .plhead_bg:after {
    content: ' ';
    background-color: rgba(0, 0, 0, 0.25);
  }
  .plhead_wrap {
    display: flex;
    position: relative;
    z-index: 2;
  }
  .plhead_fl {
    width: 126px;
    height: 126px;
    position: relative;
    background-color: #e2e2e3;
    .u-img {
      width: 100%;
      vertical-align: middle;
    }
    .lsthd_icon {
      position: absolute;
      z-index: 3;
      top: 10px;
      left: 0;
      padding: 0 8px;
      height: 17px;
      color: #fff;
      font-size: 9px;
      text-align: center;
      line-height: 17px;
      background-color: rgba(217, 48, 48, 0.8);
      border-top-right-radius: 17px;
      border-bottom-right-radius: 17px;
    }
    .u-earp {
      background-image: url('../assets/img/erji.svg');
    }
  }
}
.plhead_bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.pylst_header {
  .lsthd_fl:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 18px;
    z-index: 2;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  }
  .lsthd_num {
    position: absolute;
    right: 2px;
    top: 0;
    z-index: 3;
    padding-left: 15px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
  }
  .plhead_fr {
    padding-top: 3px;
    flex: 1 1 auto;
    width: 1%;
    margin-left: 16px;
    > h2 {
      padding-top: 1px;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.3;
      color: #fefefe;
      height: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
  }
  .lsthd_auth {
    position: relative;
  }
  .lsthd_link {
    display: inline-block;
    color: hsla(0, 0%, 100%, 0.7);
    font-size: 14px;
  }
  .lsthd_ava {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
  }
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.u-avatar {
  position: relative;
  > .u-img {
    border-radius: 50%;
    width: 100%;
  }
  .ava-icon {
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 12px;
    height: 12px;
  }
}
.official_pylst_header {
  position: relative;
  padding: 50px 20px 20px;
  overflow: hidden;
  height: 130px;
  .ofplheader_bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  }
  .ofplheader_mask {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.25;
    background: #000;
  }
  .ofplheader_wrap {
    position: relative;
    z-index: 100;
    color: #fff;
    div:first-child {
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ofplheader_tag {
      padding-left: 3px;
      padding-right: 3px;
      margin-top: 10px;
      display: inline-block;
      background-color: hsla(0, 0%, 100%, 0.2);
      border-radius: 2px;
      font-size: 10px;
      color: hsla(0, 0%, 100%, 0.6);
    }
    .ofplheader_content {
      margin-top: 20px;
      font-size: 14px;
      color: hsla(0, 0%, 100%, 0.8);
    }
    .overflow {
      float: right;
      margin: -0.7em -0.3em 0 0;
      width: 0.4em;
      height: 0.4em;
      border-top: 1px solid hsla(0, 0%, 100%, 0.8);
      border-right: 1px solid hsla(0, 0%, 100%, 0.8);
      transform: rotate(45deg);
    }
  }
}
.pylst_list {
  .u-smtitle {
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0;
    font-weight: 400;
    margin: 0;
  }
  .m_newcomm {
    position: relative;
    margin-top: 18px;
    > h4 {
      padding: 0 10px;
      height: 23px;
      line-height: 23px;
      margin: 0;
      color: #666;
      font-size: 12px;
      font-weight: 400;
      background: rgba(0, 0, 0, 0.05);
    }
  }
}
.f-thide2,
.f-thide3,
.f-thide4 {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
